<template>
		<div class="container-fluid p-0">
			<!-- 顶端导航栏 -->
			<div id="a1" class="row no-gutters bg_gray text-muted">
				<div class="w-50 pl-5 col-sm-12 col-md-6 col-lg-6">
					<ul class="nav float-left">
					<li class="nav-item py-1"><span class="">您好，欢迎来到 花多彩 ！</span></li>
					<li class="nav-item"><a class="nav-link py-1 text-muted" href="login.html">请登录</a></li>
					<li class="nav-item"><a class="nav-link py-1 text-muted" href="reg.html">免费注册</a></li>
				  </ul>
				</div>
				<div class="w-50 pr-5 col-sm-12 col-md-6 col-lg-6">
					<ul class="nav float-sm-left float-md-right pl-sm-4">
					<li class="nav-item"><a class="nav-link py-1 text-muted" href="#">个人中心</a></li>
					<li class="nav-item"><a class="nav-link py-1 text-muted" href="#">购物车0件</a></li>
					<li class="nav-item"><a class="nav-link py-1 text-muted" href="#">微信端</a></li>
				  </ul>
				</div>
			</div>
				<div class="row no-gutters mt-5">
					<div class="col-sm-12 col-md-2 col-lg-3">
						<div class="d-flex justify-content-center align-items-center">
							<!-- logo图标 -->
							<img class="logo" src="https://cdn.huaduocai.net/hdc_pc_images/logo.jpg" >
						</div>
					</div>
					<!-- 搜索栏 -->
				  <div class="col-sm-12 col-md-6 col-lg-5 py-5">
						<div class="row no-gutters">
							<div class="bg-transparent col-10 ">
								<input class="form-control border_red rounded-0  py-0" placeholder="玫瑰" type="text">
							</div>
						  <div class="col-2">
								<a class="d-block top_height_a d-flex justify-content-center align-items-center a_12 a_color" href="#">搜索</a>
							</div>
						</div>
						<!-- 导航栏 -->
						<ul class="breadcrumb bg-transparent col-sm-12 py-0 px-0">
							<li class="breadcrumb-item"><a class="text-muted a_12" href="#">百合</a></li>
							<li class="breadcrumb-item"><a class="text-muted a_12" href="#">玫瑰</a></li>
							<li class="breadcrumb-item"><a class="text-muted a_12" href="#">满天星</a></li>
							<li class="breadcrumb-item"><a class="text-muted a_12" href="#">向日葵</a></li>
							<li class="breadcrumb-item"><a class="text-muted a_12" href="#">康乃馨</a></li>
							<li class="breadcrumb-item"><a class="text-muted a_12" href="#">33支</a></li>
							<li class="breadcrumb-item"><a class="text-muted a_12" href="#">99支</a></li>
						</ul>
					</div>
					<!-- 订单丶电话logo -->
				  <div class="col-sm-12 col-md-4 col-lg-4">
					 <a href="#"><img class="py-3 pl-5" src="https://cdn.huaduocai.net/Storage/logo/1/5057119636264957.png" alt=""></a>
					 <div><img class="pt-4" src="https://cdn.huaduocai.net/hdc_pc_images/hdc-webtel.png"></div>
					</div>
					
				</div>	
		</div>
</template>

<style scoped>
   .bg_gray{
	background: linear-gradient(to bottom,#f5f4f5 0%,#e6e6e5 100%);
}
a:hover{color: #FF0000 !important;text-decoration: none;}
.border_red{
	border: 2px solid red;
}
.breadcrumb-item + .breadcrumb-item::before{
				content: " ";
}
.form-control.border_red:focus{
				box-shadow:0 0 0 0 #000;
				border-color: red;
}
.top_height_a{
	width: 66.66%;height: 100%;
	background: red;
	color: white;
}
.top_height_a:hover{color: white;}
input::-webkit-input-placeholder {
    /* placeholder颜色 */
    color: #aab2bd;
    /* placeholder字体大小 */
    font-size: 12px;
}
.logo{width: 120px;height: 120px;}
.a_12{font-size: 12px;}
.a_color:hover{color: white !important;}
.ul_a1{color: white;}
.ul_a1:hover{color: white !important;}
.breadcrumb{background-color: transparent;border-radius: 0;}
.bg_color{background-color: #ff4466;}
</style>